<template>
	<view class="content">
		<view class="user tn-flex tn-flex-row-center">
			<view class="user-left tn-flex">
				<view class="avatar">
					<image :src="user.avatar" mode=""></image>
				</view>
				<view class="avatar-right tn-flex">
					<view class="name tn-flex tn-flex-col-center">
						<text class="n1">{{user.nickname}}</text>
<!-- 						<view class="grade" v-if="user.vip==0&&configInfo.is_lv">LV{{user.lv}}</view>
						<view class="grade" v-if="user.vip==1">VIP{{user.vip_lv}}</view> -->
						<view class="aht">已认证</view>
					</view>
					<view class="ID">ID：{{user.id}}</view>
					
					<!-- <view class="p" v-if="levelData.baifenbi">
						<tn-line-progress :height="8" :percent="levelData.baifenbi" activeColor="#9D5EF4"></tn-line-progress>
					</view> -->
					<view class="p-text" v-if="levelData.my_level">
						Lv{{levelData.my_level.name}}
					<text style="margin-left: 6rpx;" v-if="levelData.next_level.name">本月还差{{levelData.cha}}成交额可评为{{levelData.next_level.name}}</text>
					</view>
					
					<!-- <view class="aht">已认证</view> -->
				</view>
			</view>
			<view class="switch tn-flex tn-flex-center">
				<tn-switch v-model="is_order" activeColor="#9D5EF4" :size="44" :inactiveValue="0"
				:activeValue="1" :loading="swLoading" @change="change"></tn-switch>
			</view>
		</view>
		<view class="tag tn-flex">
			<view class="tag-item tn-flex" @click="goOrder">
				<view class="tag-item-left">
					<view class="title">我的接单</view>
					<view class="ftitle">查看接单更容易</view>
				</view>
				<image src="/static/my/order.png" mode=""></image>
			</view>
			<view class="tag-item tn-flex" @click="goSkill">
				<view class="tag-item-left">
					<view class="title">我的技能</view>
					<view class="ftitle">快速查看我的技能</view>
				</view>
				<image src="https://web.lanmei.co/image/jineng.png" mode=""></image>
			</view>
		</view>
		<view class="list">
			<view class="list-item tn-flex" @click="goGrad">
				<text>抢单池</text>
				<image src="/static/index/right1.png" mode=""></image>
			</view>
			<view class="list-item tn-flex" @click="goMyGrad">
				<text>我的抢单</text>
				<image src="/static/index/right1.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: '',
				is_order:false,
				swLoading:false,
				baifenbi: 0,
				levelData: []
			}
		},
		onLoad() {
			this.info()
			this.isOrder()
		},
		methods: {
			async info() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/index/GetUser',
						data: {}
					})
					this.user = result.data.data.userinfo;
					this.levelData = result.data.data.level
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			// 获取接单状态
			async isOrder(){
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/play_index/is_order',
						data: {}
					})
					let is_order = result.data.data.is_order
					this.is_order = is_order ? true : false
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			// 修改接单状态
			async setIsOrder(is_order){
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/play/is_order',
						data: {
							is_order
						}
					})
					this.swLoading = false

				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			change(e){
				this.swLoading = true
				this.setIsOrder(e)
			},
			goOrder() {
				uni.navigateTo({
					url: "/playcenterPage/my-order"
				})
			},
			goSkill() {
				uni.navigateTo({
					url: "/playcenterPage/my-skill"
				})
			},
			goGrad() {
				uni.navigateTo({
					url: "/playcenterPage/Grab-a-single-pool"
				})
			},
			goMyGrad() {
				uni.navigateTo({
					url: "/playcenterPage/my-grab"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		//padding:30rpx 0;
    //background: #fff;
		.user {
      justify-content: space-between;
      margin: 15px;
      background: #fff;
      padding: 15px;
      border-radius: 8px;
			.user-left {
				align-self: flex-end;

				.avatar {
					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}

				.avatar-right {
					height: 120rpx;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 17rpx;

					.name {
						.n1 {
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
						}

						.grade {
              background-color: #69B7FD;
              font-size: 22rpx;
              font-weight: 500;
              color: #FFFFFF;
              padding: 8rpx 16rpx;
              border-radius: 11px;
              margin-left: 6px;

						}
					}

					.ID {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333ad;

					}
					
					.p {
						/deep/.tn-line-progress {
							width: 65%;
						}
						
					}
					
					.p-text {
						font-size: 22rpx;
						font-weight: 400;
						color: #333333ad;
						margin-top: 6rpx;
						
					}

					.aht {
						width: fit-content;
						height: 30rpx;
						background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
						border-radius: 42rpx;
						line-height: 30rpx;
						padding: 0 10rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin-left: 20rpx;
					}
				}
			}

		}

		.tag .tag-item:nth-child(1) {
			border-right: 1px solid #343541;
		}

		.tag {
			align-items: center;
      margin: 15px;
      background: #fff;
      padding: 15px;
      border-radius: 8px;
			.tag-item {
				flex: 1;
				justify-content: space-between;
				padding: 0 32rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}

				.tag-item-left {
					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}

					.ftitle {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333ad;
						margin-top: 12rpx;
					}
				}
			}
		}

		.list {
      margin: 15px;
      background: #fff;
      padding: 15px;
      border-radius: 8px;

			.list-item {
				height: 84rpx;
				align-items: center;
				justify-content: space-between;
				padding: 0 32rpx;

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				image {
					width: 12rpx;
					height: 21rpx;
				}
			}
		}
	}
</style>
